<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>treejs demo</title>

    <script src="https://cdn.bootcss.com/three.js/r83/three.js"></script>
    <!--<script src="https://cdn.bootcss.com/three.js/r83/three.module.js"></script>-->

    <!--<script src="../static/js/three/three.js"></script>-->

    <script src="../static/js/three/controls/TrackballControls.js"></script>

    <!--<script src="../static/js/three/loaders/VTKLoader.js"></script>-->
    <script src="../static/js/three/loaders/ColladaLoader.js"></script>
    <script src="../static/js/three/VTKLoader.js"></script>

    <script src="../static/js/three/Detector.js"></script>
    <script src="../static/js/three/Stats.js"></script>
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display: block;
        }

        #info a, .button {
            color: #f00;
            font-weight: bold;
            text-decoration: underline;
            cursor: pointer
        }
    </style>

</head>
<body>


<div id="info">
</div>


<script>

    if (!Detector.webgl) Detector.addGetWebGLMessage();

    var container, stats;

    var camera, controls, scene, renderer, rouletteScene;

    var cross;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e10);
        camera.position.z = 1.3;
        camera.position.x = 0.77;
        camera.position.y = -1.2;


        controls = new THREE.TrackballControls(camera);

        controls.rotateSpeed = 5.0;
        controls.zoomSpeed = 5;
        controls.panSpeed = 2;

        controls.noZoom = false;
        controls.noPan = false;

        controls.staticMoving = false;
        controls.dynamicDampingFactor = 0.3;

        scene = new THREE.Scene();

        scene.add(camera);

        // light

        var dirLight = new THREE.AmbientLight(0xffffff);
        dirLight.position.set(200, 200, 1000).normalize();

        camera.add(dirLight);
//        camera.add(dirLight.target);

        var material = new THREE.MeshLambertMaterial({color: 0xffffff, side: THREE.DoubleSide});

//        var loader = new THREE.VTKLoader();
//        loader.addEventListener('load', function (event) {
//
//            var geometry = event.content;
//
//            var mesh = new THREE.Mesh(geometry, material);
//            mesh.position.setY(-0.09);
//            scene.add(mesh);
//
//        });
//        loader.load("../static/js/three/models/vtk/bunny.vtk");


        var loader = new THREE.ColladaLoader();
        loader.load("../static/js/three/models/wuzi.dae", function (collada) {
                rouletteScene = collada.scene;
//                rouletteScene.scale.set(0.1, 0.1, 0.1);
//                rouletteScene.position.set(5, 5, 5);
                var geometry = collada.content;
                var mesh = new THREE.Mesh(geometry, material);
                mesh.position.setY(-0.09);

                scene.add(mesh);
            },
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + "% loaded");
            });


        // renderer

        renderer = new THREE.WebGLRenderer({antialias: false});
//        renderer.setClearColorHex(0x8888aa, 1);
        renderer.setSize(window.innerWidth, window.innerHeight);

        container = document.createElement('div');
        document.body.appendChild(container);
        container.appendChild(renderer.domElement);

        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        container.appendChild(stats.domElement);

        //

        window.addEventListener('resize', onWindowResize, false);

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

        controls.handleResize();

    }

    function animate() {

        requestAnimationFrame(animate);

        controls.update();
        renderer.render(scene, camera);

        stats.update();

    }

</script>
</body>
</html>